// components/test3/test3.js
Component({
	/* 组件所在页面的生命周期 */
	pageLifetimes: {
		// 组件所在的页面被展示时执行。无参数
		show() {
			console.log('~~~~~~ show ~~~~~~');
			// 组件所在页面被展示时，立即调用 _randomColor 生成随机颜色
			this._randomColor();
		},
		// 组件所在的页面被隐藏时执行。无参数
		hide() {
			console.log('~~~~~~ hide ~~~~~~');
		},
		// 组件所在的页面尺寸变化时执行。参数：Object Size
		resize() {
			console.log('~~~~~~ resize ~~~~~~');
		},
	},

	/* 组件的生命周期 新用法。若同时存在新旧两种用法，会以新用法为主 */
	lifetimes: {
		created() {
			console.log('====== created ======');
		},
		attached() {
			console.log('====== attached ======');
		},
		detached() {
			console.log('====== detached ======');
		},
	},

	/* 组件的生命周期 旧用法 */
	// created() {
	// 	console.log('====== created ======');
	// },
	// attached() {
	// 	console.log('====== attached ======');
	// },
	// detached() {
	// 	console.log('====== detached ======');
	// },

	/**
	 * 
	 */
	options: {
		// 指定所有 _ 开头的数据字段为纯数据字段。纯数据字段 是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。
		pureDataPattern: /^_/
	},

	/**
	 * 组件的属性列表
	 */
	properties: {

	},

	/**
	 * 组件的初始数据
	 */
	data: {
		// 将 rgb 改造为 _ 开头的纯数据字段
		_rgb: {									 // rgb 的颜色值对象
			r: 0,
			g: 0,
			b: 0
		},
		fullColor: "0, 0, 0",		 // 根据 rgb 对象的三个属性，动态计算 fullColor 的值
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		// 修改 rgb 对象上 r 属性的值
		changeR() {
			this.setData({
				"_rgb.r" : this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
			});
		},
		// 修改 rgb 对象上 g 属性的值
		changeG() {
			this.setData({
				"_rgb.g" : this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
			});
		},
		// 修改 rgb 对象上 b 属性的值
		changeB() {
			this.setData({
				"_rgb.b" : this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
			});
		},
		// 生成随机 RGB 颜色的方法，非事件处理函数建议以 _ 开头
		_randomColor() {
			this.setData({
				_rgb: {
					r: Math.floor( Math.random() * 256 ),
					g: Math.floor( Math.random() * 256 ),
					b: Math.floor( Math.random() * 256 ),
				},
			});
		},
	},

	/**
	 * 监听器
	 */
	observers: {
		// 监听 rgb 对象上 r g b 三个子属性的变化
		"_rgb.r, _rgb.g, _rgb.b": function(newR, newG, newB) {
			// 为 data 中的 fullColor 重新赋值
			this.setData({
				fullColor: `${newR}, ${newG}, ${newB}`
			});
		}
		/* 如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化 */
		/* "_rgb.**": function(obj) {
			// 为 data 中的 fullColor 重新赋值
			this.setData({
				fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
			});
		} */
	}
})
